<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
    <style>
        [v-cloak]{
            color: red;
        }

    </style>

</head>
<body>
<div id="app">
    <div>Hello World! {{message}}</div>
    <div v-text="message">Hello World!</div>
    <div v-once>{{message}}</div>
    <div v-html="rawHtml"></div>

    <div v-pre>{{message}}</div>

<!--    显示隐藏控制 style="display: none;" -->
    <div v-show="false">Show Me </div>

<!--    条件渲染-->
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>

<!--    列表渲染  基于源数据来多次渲染元素  Array Object number String Iterable -->
    <ul>
        <li v-for="(user,index) in users" v-bind:key="user.id"  >{{user.id}}-{{user.name}}-{{index}} </li>
    </ul>

<!--    绑定事件-->
    <button v-on:click="btnClick" >显示/隐藏</button>
    <button @click="btnClick" >显示/隐藏</button>

<!--    绑定属性 -->
    <div>
        <img v-bind:src="img.url" v-bind:width="img.width" v-bind:height="img.height">
        <img  :src="img.url"  :width="img.width"  :height="img.height">
    </div>

<!--    表单双向绑定-->
    <div>
        <input v-model="message" placeholder="输入内容">
    </div>

    <div>
        <textarea v-model="message" placeholder="输入内容"></textarea>
    </div>

    <div>
        <select v-model="message">
            <option>苹果</option>
            <option>香蕉</option>
            <option>葡萄</option>
        </select>
    </div>

<!--    v-cloak 实例编译结束时移除-->
    <div v-cloak>实例编译结束时移除 </div>

<!--    v-slot  插槽-->
    <component-a>
        <template v-slot:right>
            <input v-model="message">
        </template>
        <template v-slot:left>
            <button @click="btnClick">确定</button>
        </template>
    </component-a>



</div>
<script>

    let componentA ={
        data:{
            name:function () {
                return "组件A"
            }
        },
        template: '<div> <slot name="left"></slot> <slot name="right"></slot> </div>'
    }


    // setTimeout(
    //     ()=>{

            const  vm = new Vue(
                {
                    el:"#app",
                    components:{
                        componentA:componentA
                    },
                    data:{
                        message:'Hello Vue!',
                        rawHtml:'<div>Html </div>',
                        type:'A',
                        users:[
                            {name:'Tom',id:'001'},
                            {name:'Jack',id:'002'}
                        ],
                        img:{
                            url:'https://www.bing.com/th?id=OHR.ThailandWaterfall_FF_1920x1080_G_679699496_HD_EN-US576321563.jpg&rf=LaDigue_1920x1080.jpg',
                            height:"100px",
                            width:"200px"
                        }
                    },
                    methods:{
                        btnClick:function () {
                            this.type="ABC".charAt(parseInt(Math.random()*3,10))
                        }
                    }
                }
            )

    //     },3000
    // )


</script>


</body>
</html>